<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<th:block th:include="include :: header('登录')"/>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../static/ocean/css/ry-ui.css" th:href="@{/ocean/css/ry-ui.css?v=4.7.5}" rel="stylesheet"/>
    <link href="../static/ocean/css/bice.css" th:href="@{/ocean/css/bice.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/prt.css" th:href="@{/ocean/css/prt.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/common.css" th:href="@{/ocean/css/common.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/datepicker3.css" th:href="@{/ocean/css/datepicker3.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/pagination.css" th:href="@{/ocean/css/pagination.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/style.css" th:href="@{/ocean/css/style.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/head.css" th:href="@{/ocean/css/head.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/index.css" th:href="@{/ocean/css/index.css}" rel="stylesheet"/>
    <link href="../static/ocean/css/jquery.range.css" rel="stylesheet"/>
    <link href="../static/ocean/css/yulan.css" rel="stylesheet"/>
    <link href="../static/ocean/css/layer.css" rel="stylesheet"/>
    <link href="../static/ocean/css/hint.min.css" rel="stylesheet"/>
</head>
<style type="text/css">
</style>
<body>
<div class=" prt_cont1_box">
    <div class="prt_cont1">
        <div class="border_t left"></div>
        <p class="p_title left">产品预览</p>
        <div class="border_t right"></div>
        <div class="clearfix"></div>
        <form class="xz_cont1_box">
            <input type="hidden" id="productId" th:value="${productId}"/>
            <input type="hidden" id="ncFileUpdateDate" th:value="${ncFileUpdateDate}"/>
            <input type="hidden" id="ncFileId" th:value="${ncFileId}"/>
            <input type="hidden" id="ncFileName" th:value="${ncFileName}"/>
            <h1 class="xz_h1">[[${productName}]]</h1>
            <div class="xz_cont_1">
                <label class="label_sty">日期</label>
                <input class="input_sty1" id="date">

                <label class="label_sty">预览文件</label>
                <select class="select_sty" id="yulanNcfile" >
                </select>
                <select class="select_sty" id="yulanNcfileName" hidden >

                </select>
            </div>
            <div class="xz_cont_1" id="timeDiv" style="display:none">
                <label class="label_sty" id="timeLabel" style="display:none">时间</label>
                <select class="select_sty" id="timeSelect" style="display:none">
                </select>
            </div>
            <div class="xz_cont_1 xz_cont1_height" id="longDiv" style="display:none">
                <label class="label_sty left">经度</label>
                <input class="range-slider" type="hidden" id="longSlider"/>
                <span class="span_font">取值范围：</span>
                <input type="text" value="" id="longMinVal"/>-
                <input type="text" value="" id="longMaxVal"/>
                </br></br>
                <span class="span_font" id="longRange">取值范围：-90~90</span>
                <div class="clearfix"></div>
            </div>
            <div class="xz_cont_1 xz_cont1_height" id="latiDiv" style="display:none">
                <label class="label_sty left">纬度</label>
                <input class="range-slider" type="hidden" id="latiSlider"/>
                <span class="span_font">取值范围：</span>
                <input type="text" value="" id="latMinVal"/>-
                <input type="text" value="" id="latMaxVal"/>
                </br></br>
                <span class="span_font" id="latiRange">取值范围：-90~90</span>
                <div class="clearfix"></div>
            </div>
            <div class="xz_cont_1" id="depthDiv" style="display: none;">
                <label class="label_sty">深度/高度(层数)</label>
                <select class="select_sty" id="depth">
                </select>
            </div>
            <div class="xz_cont_1">
                <div class="panel">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#" href="#sitesw">
                                矢量数据预览选项
                            </a>
                        </h4>
                    </div>
                    <div id="sitesw" class="panel-collapse collapse" aria-expanded="false">
                        <input type="hidden" id="elementType" value="0"/>
                        <div class="panel-body">
                            <ul class="speedbox_cont">
                                <li class="speedbox_cont_1 left">
                                    <div class="radio left" style="background-image:url(/static/img/radio_img.png)"></div>
                                    <div class="left speedfont">单要素预览</div>
                                    <div class="clearfix"></div>
                                </li>
                                <li class="speedbox_cont_1 left">
                                    <div class="radio left"></div>
                                    <div class="left speedfont">选择矢量分量（U和V）</div><span aria-label="针对矢量数据以经向纬向分量形式存储的情况" class="hint--top-right hint--medium help_span"><img src="${ctx}/webpage/web/images/icon3.png"></span>
                                    <div class="clearfix"></div>
                                </li>
                                <li class="speedbox_cont_1 left">
                                    <div class="radio left"></div>
                                    <div class="left speedfont">选择速度和方向（波高和波向）</div><span aria-label="针对矢量数据以速度和方向（波高波向）形式存储的情况" class="hint--top-right hint--medium help_span"><img src="${ctx}/webpage/web/images/icon3.png"></span>
                                    <div class="clearfix"></div>
                                </li>
                                <div class="clearfix"></div>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <ul class="speedbox_cont">
                    <li class="speedbox_cont_2">
                        <div class="xz_cont_2 left speedbox_cont_2-1">
                            <label class="label_sty margin" id="yulanEmelentLabel">要素</label>
                            <select class="select_sty select_sty1" id="out">
                            </select>
                        </div>
                        <div class="xz_cont_2 left speedbox_cont_2-1" id="out2Div" style="display:none">
                            <label class="label_sty margin" id="yulanEmelentLabel2">要素</label>
                            <select class="select_sty select_sty1" id="out2">
                            </select>
                        </div>
                        <div class="xz_cont_2 left speedbox_cont_2-1">
                            <label class="label_sty margin">出图类型</label>
                            <select class="select_sty select_sty1" id="type">
                            </select>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                </ul>
            </div>
            <div class="input_sub_div">
                <input class="input_sub" type="button" id="preview" onclick="doPreview()" value="确定">
                <input class="input_sub_2" style="margin-top:30px;" type="button" onclick="returnback()" value="返回">
            </div>
        </form>
    </div>
</div>
</body>
<script th:src="@{/ocean/js/yulan.js}"></script>
<script th:src="@{/ocean/js/bootstrap-paginator.js}"></script>
<script src="/ocean/js/jquery.range.js"></script>
<script src="/ocean/js/laydate.js"></script>
<script src="/ocean/js/layer.js"></script>
<script>
function subscription(productId) {
    $("#test").load("/home/productBrowsing/subscription/"+productId);
}
function returnback() {
    $("#test").load("/home/productBrowsing/detail")
}

</script>
</html>
